<template>
  <div class="home">
      <div class="mb-4">
        <el-button disabled="true" size="large" color="#000000">Default</el-button>
        <el-button type="primary" loading="true">Primary</el-button>
        <el-button type="success">Success</el-button>
        <el-button type="info">Info</el-button>
        <el-button type="warning">Warning</el-button>
        <el-button type="danger">Danger</el-button>
      </div>
      <!-- 图标组件的使用 -->
      <div>
        <el-icon :size="size" :color="color">
          <Edit />
        </el-icon>
        <!-- 或者独立使用它，不从父级获取属性 -->
        <Edit class="editClass" :color="color" />
        <el-icon :size="size" :color="color"><User /></el-icon>
        <el-icon :size="size" :color="color"><Cpu /></el-icon>
        <Medal class="medalClass" :size="size" :color="color" />
      </div>
      <el-row>
        <el-col :span="24"><div class="box1"></div></el-col>
      </el-row>
      <br />
      <el-row :gutter="30">
        <el-col :span="2"><div class="box1"></div></el-col>
        <el-col :span="2" :offset="2"><div class="box2"></div></el-col>
      </el-row>
      <el-row justify="space-round">
        <el-col :span="4"><div class="box1"></div></el-col>
        <el-col :span="4"><div class="box2"></div></el-col>
        <el-col :span="4"><div class="box3"></div></el-col>
      </el-row>
      <br />
        <el-row :gutter="10">
          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"
            ><div class="box1"
          /></el-col>
          <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"
            ><div class="box2"
          /></el-col>
          <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"
            ><div class="box3"
          /></el-col>
          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"
            ><div class="box2"
          /></el-col>
        </el-row>
      
     
      
  </div>
</template>

<script setup lang="ts">
import {ref,reactive} from "vue"

const size = ref<string>("50px")
const color = ref<string>("#409EFF")
</script>

<style lang="less" scoped>

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.home{

  .editClass{
    width:50px ;
    height: 50px;
  }
  .medalClass{
    width:50px ;
    height: 50px;
  }
  .box1{
    background-color: aqua;
    height: 30px;
  }
  .box2{
    background-color: red;
    height: 30px;
  }
  .box3{
    background-color: orange;
    height: 30px;
  }
}
</style>
